@extends('layout')
@section('css')
<link rel="stylesheet" href="{{URL::asset('css/index.css')}}">
@endsection
@section('content')
<div class="main">   
    <img src="{{URL::asset('img/indexBanner.png')}}" width="100%">
    <div class="buttonMiddle">
        <div class="button button1 active" data-id="1"></div>
        <div class="button button2" data-id="2"></div>
        <div class="button button3" data-id="3"></div>
        <div class="buttonText buttonText1 active " data-id="1">
            <img src="{{URL::asset('img/buttonText1.png')}}" width="100%">
            <p>教你回复神问题</p>
            <p>2月8日~28日</p>
        </div>
        <div class="buttonText buttonText2 " data-id="2">
            <img src="{{URL::asset('img/buttonText2.png')}}" width="100%">
            <p>集福联赢888现金</p>
            <p>2月12日~15日</p>
        </div>
        <div class="buttonText buttonText3 " data-id="3">
            <img src="{{URL::asset('img/buttonText3.png')}}" width="100%">
            <p>春节假期不再孤单</p>
            <p>2月16日~3月2日</p>
        </div>
    </div>
    <div class="middle one">
        <img src="{{URL::asset('img/middleText1.png')}}" width="70%" class="middleText1">
        <div class="middleButton">点击查看</div>
    </div>
    <div class="middle two myhide">
        <div class="middleButton">马上拿红包</div>
    </div>
    <div class="middle three myhide">
        <div class="middleButton">点击查看</div>
    </div>
    <div class="advertisement">
        <img src="{{URL::asset('img/advertisement.png')}}" alt="" width="20%" class="guanggao">
        <img src="{{URL::asset('img/advertisement.png')}}" alt="" width="20%" class="guanggao">
        <img src="{{URL::asset('img/advertisement.png')}}" alt="" width="20%" class="guanggao">
        <img src="{{URL::asset('img/advertisement.png')}}" alt="" width="20%" class="guanggao">
    </div>
    <div class="rule">
        <p class="title">活动规则</p>
        <p>活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则</p>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="prompt">
        <div class="modal-dialog" role="document">
            <div class="background">
                <div class="title">温馨提示</div>
                <div class="text"></div>
                <div>
                    <div class="sure" data-dismiss="modal">好的!</div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="phone">
        <div class="modal-dialog" role="document">
            <div class="background">
                <div class="title">请输入手机号</div>
                <div class="input">
                    <label for="" class="phoneLabel">输入手机号</label>
                    <input type="text" class="phoneInput">
                </div>
                <div>
                    <div class="sure" data-dismiss="modal">提交!</div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
    //window.location.href="https://hxsapp_visible_act_share_btn#分享标题#分享链接#封面地址#分享描述#活动分享统计类型名称";
    var u_id = '{{$u_id}}';
    function is_weixin() { 
        var ua = window.navigator.userAgent.toLowerCase(); 
        if (ua.match(/MicroMessenger/i) == 'micromessenger') { 
            console.log("微信浏览器"); 
            return true;
            
        } else { 
            console.log("不是微信浏览器"); 
            return false;
        } 
    }
    $('.button').on('click',function(){
        var id = $(this).data('id');
        $(this).addClass('active').siblings('.button').removeClass('active');
        if(id==1){
            $('.buttonText1').addClass('active').siblings('.buttonText').removeClass('active');
            $('.one').show().siblings('.middle').hide();
        }else if(id==2){
            $('.buttonText2').addClass('active').siblings('.buttonText').removeClass('active');
            $('.two').show().siblings('.middle').hide();
        }else if(id==3){
            $('.buttonText3').addClass('active').siblings('.buttonText').removeClass('active');
            $('.three').show().siblings('.middle').hide();
        }
    });
    $('.buttonText').on('click',function(){
        var id = $(this).data('id');
        $(this).addClass('active').siblings('.buttonText').removeClass('active');
        if(id==1){
            $('.button1').addClass('active').siblings('.button').removeClass('active');
            $('.one').show().siblings('.middle').hide();
        }else if(id==2){
            $('.button2').addClass('active').siblings('.button').removeClass('active');
            $('.two').show().siblings('.middle').hide();
        }else if(id==3){
            $('.button3').addClass('active').siblings('.button').removeClass('active');
            $('.three').show().siblings('.middle').hide();
        }
    });
    $('.one').on('click','.middleButton',function(){
        //location.href = '/couplet?u_id=123';

    });
    $('.two').on('click','.middleButton',function(){
        var wx = is_weixin();
        if(wx == true){
            $('#phone').modal('show');
            return;
        }
        location.href = '/couplet';
        //if(u_id){
       // }else{
        //    $('#prompt').modal('show');
        //    $('#prompt .text').text('请先登录');
        //}
    });
    $('.three').on('click','.middleButton',function(){
        if(wx == true){
            $('#prompt').modal('show');
            $('#prompt .text').text('请下载app进行操作');
            return;
        }
        if(u_id){
            location.href = '/couplet';
        }else{
            $('#prompt').modal('show');
            $('#prompt .text').text('请先登录');
        }
    });
    $('#phone .sure').on('click',function(){
       var phone = $('#phone .phoneInput').val();
        $.ajax({
            url:'/getUserId',
            data:{'phone':phone},
            dataType:'JSON',
            type:'POST',
            success:function(data){
                if(data.code==201){
                    location.href='https://app.hxsapp.com/hxsweb/signUpPageAct?jump_url=http://hxsh5.fsgit.cn/couplet';
                }else {
                    location.href='/couplet?user_id='+data.data;
                }
            }
        });
    });
</script>
@endsection